<template>
  <div class="allbackground">
    <div class="background">
      <div class="banner">
        <h1 class="bannertop" v-html="announcement.title"></h1>
        <div
          style="
            width: 100%;
            height: 5px;
            background-color: #c5c8c9;
            border-radius: 10px;
          "
        ></div>
        <div class="bannerbottom">
          <div class="bannerbottomleft">
            编辑于：
            <div class="time">{{ announcement.gmtCreate }}</div>
          </div>
        </div>
      </div>
      <center>
        <div class="content" v-html="announcement.content"></div>
        <div class="bottomback" @click="$router.push('/')">返回首页</div>
      </center>

    </div>
    <div class="back" @click="$router.push('/contentList')">
      <svg-icon icon-class="detailback" class="backdetail"></svg-icon>
      <svg-icon icon-class="detailbackmove" class="movebackdetail"></svg-icon>
    </div>
  </div>
</template>

<script>
import { getAnnouncementById } from "@/api/cms/cms";
import SvgIcon from "../../components/SvgIcon.vue";
export default {
  components: { SvgIcon },
  /**
   * asyncData 方法用于在服务器端渲染之前异步获取数据。
   * 这个方法会在每个页面组件被加载之前被调用，并且仅在服务器端执行一次。
   *
   * @param {Object} context - 包含了组件的上下文信息，例如：params, query, store 等。
   * @returns {Promise<Object>} 返回一个包含数据的对象，这些数据将被设置为组件的属性。
   */
  asyncData({ query }) {
    // 返回一个对象，其中包含了从上下文(query)中获取的noticeId
    // 这个noticeId将被用作组件的一个属性，可以在组件的模板或方法中使用
    return {
      noticeId: query.id,
    };
  },
  data() {
    return {
      announcement: "",
    };
  },
  mounted() {
    console.log(this.noticeId);
    this.queryAnnouncementById();
  },

  methods: {
    queryAnnouncementById() {
      getAnnouncementById(this.noticeId).then((res) => {
        console.log(res);

        if (res.code === 20000) {
          this.announcement = res.data.announcement;
          //this.announcement.content = this.announcement.content.replace(/<img /g, '<img style="width: 70% ;" ');
        }
        console.log(this.announcementcontent);
      });
    },
  },
};
</script>

<style scoped>
.allbackground {
  /* background-color: #efefef; */
  padding: 50px 0;
}

.background {
  width: 66.4%;
  margin: auto;
  /* background: #fff; */
  padding: 0 5% 5% 5%;
}

.banner {
  margin-bottom: 25px;
  position: relative;
}

.bannerbottom {
  display: flex;
  justify-content: space-between;
  margin-top: 25px;
}

.bannerbottomleft {
  width: 28%;
  display: flex;
  justify-content: space-between;
  font-size: 20px;
}

.bannerbottomright {
  display: flex;
  justify-content: space-between;
  font-size: 20px;
}

.time {
}

.content {
  font-size: 20px;
  margin-top: 25px;
}

/* 由于v-html渲染的内容被视为子组件，默认情况下不应用scoped样式。需要通过深度选择器>>>或::v-deep强制穿透：*/
.content >>> img {
  width: 70%; /* 图片宽度适配容器 */
}

.mediaone,
.mediatwo,
.mediathree {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 70px;
  height: 70px;
  vertical-align: middle;
  border: 1px solid #ccc;
  border-radius: 100%;
  margin-left: 10px;
  margin-top: 10px;
  cursor: pointer;
}

.weibo {
  position: absolute;
  top: -133px;
  right: 12px;
  display: none;
  border: 1px solid #eee;
  z-index: 9;
  width: 200px;
  height: 192px;
  color: #666;
  font-size: 12px;
  text-align: center;
  box-shadow: 0 2px 10px #aaa;
  background-color: #fff;
}

.triangle {
  position: absolute;
  top: 60px;
  right: 101px;
  display: none;
  width: 0px;
  height: 0px;
  border: 15px solid transparent;
  border-top-color: #d7d7d7;
}

.mediatwo:hover .weibo {
  display: inline-block;
}

.mediatwo:hover .triangle {
  display: inline-block;
}

.top {
  font-weight: normal;
  height: 26px;
  line-height: 26px;
  font-size: 12px;
  background-color: #f3f3f3;
  margin: 0;
  padding: 0;
  color: #777;
}

.center {
  width: 105px;
  margin: 10px auto;
}

.back {
  padding: 10px;
  border: 1px solid lightgrey;
  border-radius: 50px;
  width: 50px;
  height: 50px;
  position: fixed;
  left: 1%;
  top: 275px;
  z-index: 1111;
  background-color: #fff;
  justify-content: space-around;
  cursor: pointer;
}

.back:hover {
  background-color: #5698c3;
}

.backdetail {
  position: absolute;
  top: 25px;
  left: 24px;
}

.movebackdetail {
  display: none;
  position: absolute;
  top: 25px;
  left: 24px;
}

.back:hover .movebackdetail {
  display: inline-block;
}

.back:hover .backdetail {
  display: none;
}

.bottomback {
  margin: 50px;
  padding: 15px;
  border: 1px solid lightgrey;
  border-radius: 50px;
  width: 125px;
  height: 26px;
  background-color: #fff;
  justify-content: space-around;
  cursor: pointer;
  display: flex;
}

.bottomback:hover {
  background-color: #5698c3;
  color: #fff;
}
</style>
